<template>
    <div class="app-container">
        学生列表
      <el-form :inline="true" class="demo-form-inline" style="padding: 5px 20px;">
        <el-form-item label="班级">
          <el-input v-model="studentQuery.class" placeholder="输入班级"></el-input>
        </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
          <el-button type="default" @click="resetDate()">清空</el-button>
      </el-form>
    <el-table
      :data="list"
      stripe
      style="width: 100%"
      fit
      highlight-current-row
      >
      <el-table-column
        prop="studentName"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="studentNumber"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="studentSex"
        label="性别">
      </el-table-column>
      <el-table-column
        prop="studentClass"
        label="班级"
        width="180">
      </el-table-column>
      
      <!--删除操作-->
      <el-table-column label="删除">
        <template slot-scope="scope">
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="open(scope.row.studentNumber)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
<!--分页操作 element ui分页组件-->
    <!--其中:为单向绑定 cur size total
    封装了上一页下一页等判断跳转功能-->
    <el-pagination
        :current-page="cur"
        :page-size="size"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next,jumper"
        @current-change="getList"
        >
        <!--layout显示布局 由组件封装
          v-on:current-change绑定切换事件
          不加括号 传入获取数据的方法 查询对应页码-->
    </el-pagination>
  </div>
</template>

<!--引入接口方法加载 该方法会连接后端 发送请求获取数据异步响应在页面-->
<script>
    import PanThumb from "@/components/PanThumb"

    export default {//交给main.js封装的完成创建加载Vue根对象
        components:{PanThumb},
        data(){
            return {
                //设置变量初始值
                cur:1,
                size:5,
                studentQuery:{
                  number:'',
                  class:''
                },
                list: null,
                total: 0
            }
        },
        methods:{
            getList(){
              this.$axios.get(
                "/examsystem/student/findStudents/"
                ,{params:{studentClass: this.studentQuery.class}}
              ).then(res=>{
                this.list=null
                this.list=res.data.value
              });
            },
            
            // findByNumber(){
            //   getstudentInfo().then(res=>{
            //     this.list=null
            //     this.list[0]=res.data
            //   })
            // },
            resetDate(){
              this.studentQuery={}
            },
            removeDataById(id){
              this.$axios.delete(
                '/examsystem/student/deleteByStudentNumber'
                ,{params:{studentNumber: id}}
              ).then(res=>{
                this.list=null
              });
            },
            open(id) {
              //$confirm $message 调用组件的弹窗
              this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
                confirmButtonText: '确定',//进入then
                cancelButtonText: '取消',//进入catch
                type: 'warning'
                //封装弹窗中选项操作样式
              }).then(() => {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
                this.removeDataById(id)
              }).catch(() => {
              });
            }
        },
    }

</script>